<template>
	<view class="searchBox">
		<view class="search">
			<u-search placeholder="搜索" v-model="keywords" :showAction="false" @search="onSearch"></u-search>
		</view>

		<view class="box">
			<view class="title">互关好友</view>
			<view>
				<u-radio-group v-model="radiovalue1" placement="column" activeColor="#000" @change="groupChange">
					<view class="list dis-flex flex-x-start flex-y-center" v-for="item in list" :key="item.id">
						<u-radio :name="item.id">
						</u-radio>
						<image v-if="item.user.avatar" :src="IMG_URL+item.user.avatar" class="avatar" mode="widthFix" style="border-radius:50%" />
						<image v-else src="/static/imgs/tou.png" class="avatar" mode="widthFix" />
						<view class="name">{{item.user.username}}</view>
					</view>
				</u-radio-group>
			</view>
		</view>

		<!-- 弹窗 -->
		<view class="address-window" :class="selected==true?'on':''">
			<view class='title dis-flex flex-y-center'>发送给
				<image v-if="user.user.avatar" :src="IMG_URL+user.user.avatar" class="toAvatar" mode="widthFix" style="border-radius:50%" />
				<image v-else src="/static/imgs/tou.png" class="toAvatar" mode="widthFix" />
				<view class="iconfont"><u-icon name="close" color="#888" size="20"
						@click='()=>selected = false'></u-icon></view>
			</view>
			<view class='dis-flex flex-x-between flex-y-center infos'>
				<view class="info flex-box">
					<view class="tit ellip">{{article.introduce}}</view>
					<view class="desc">{{article.details}}</view>
				</view>
				<view class="imgwrap">
					<image v-if="article.picture" :src="IMG_URL+article.picture" class="imgs" mode="widthFix" />
					<image v-else-if="article.video_cover" :src="IMG_URL+article.video_cover" class="imgs" mode="widthFix" />
					<image v-else src="/static/imgs/temp.png" class="imgs" mode="widthFix" />
				</view>
			</view>
			<view class="btn">
				<u-button type="primary" text="确定" @click="certainly()"></u-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		shareFriend
	} from '@/api/chat.js';
	import {
		IMG_URL,
	} from "../../config/app.js";
	import {
		myFriendALL
	} from "../../api/my.js";
	import uButton from '../../uni_modules/uview-ui/components/u-button/u-button.vue'
	export default {
		components: {
			uButton
		},
		name: 'privateLetter', //私信好友
		data() {
			return {
				IMG_URL: IMG_URL,
				keywords: '',
				radiovalue1: '',
				selected: false,
				list: [],
				article:{},
				user:{
					user:{
						avatar:''
					}
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				if (uni.getStorageSync('HistoryjobList')) {
					this.HistoryjobList = JSON.parse(uni.getStorageSync('HistoryjobList'))
				}
			})
		},
		onLoad(option) {
			this.article = JSON.parse(option.article)
		},
		onShow() {
			this.firend()
		},
		methods: {
			onSearch() {

			},
			groupChange(e) {
				console.log(e)
				this.user = this.list.find(item => item.id === e);
				
				this.selected = true
				
			},
			async firend() {
				const res = await myFriendALL().then(res => {
					console.log(res, '获取我的好友');
					this.list = res.data
				});
			
			},
			async certainly(){

				let data = {
					'messageType':'share',
					'user_id':this.user.user.id,
					'content':JSON.stringify(this.article)
				}
				console.log(data,'-----------------');
				let res = await shareFriend(data).then(res => {
						console.log(res, '分享好友');
						uni.showToast({
							"duration":1500,
							'title':res.msg,
							'icon':'none'
						})
						uni.navigateBack()
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.searchBox {
		width: 100%;

		.search {
			padding: 20rpx 30rpx;
		}

		.box {
			padding: 22rpx 30rpx 0;

			.title {
				font-size: 24rpx;
				color: $uni-text-color-primary;
			}

			.list {
				margin: 20rpx 0;

				.avatar {
					width: 80rpx;
					margin: 0 16rpx;
				}

				.name {
					font-weight: bold;
					font-size: 32rpx;
					color: $uni-text-color;
				}
			}
		}

		.address-window {
			background: #FFFFFF;
			box-shadow: 0px 0px 30rpx 0px rgba(202, 202, 202, 0.6);
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 101;
			transform: translate3d(0, 100%, 0);
			transition: all .3s cubic-bezier(.25, .5, .5, .9);
			border-radius: 30rpx 30rpx 0 0;
			padding: 30rpx 30rpx 70rpx;

			&.on {
				transform: translate3d(0, 0, 0);
			}

			.title {
				font-size: 26rpx;
				color: #252525;
				border-bottom: 1px solid #EEE;
				padding-bottom: 30rpx;

				.toAvatar {
					width: 66rpx;
					margin-left: 20rpx;
				}

				.iconfont {
					margin-left: auto;
				}
			}

			.infos {
				padding: 40rpx 0;

				.imgwrap {
					.imgs {
						width: 150rpx;
						flex-shrink: 0;
						border-radius: 20rpx;
					}
				}

				.info {
					padding-right: 30rpx;

					.tit {
						font-weight: bold;
						color: $uni-text-color;
						font-size: 30rpx;
						width: 500rpx;
						display: -webkit-box;
						  -webkit-box-orient: vertical;
						  overflow: hidden;
						  /* 设置要显示的行数 */
						  -webkit-line-clamp: 1; /* 这里设置为 2 表示最多显示两行 */
					}

					.desc {
						font-size: 30rpx;
						color: $uni-text-color;
						line-height: 50rpx;
						margin-top: 20rpx;
						display: -webkit-box;
						  -webkit-box-orient: vertical;
						  overflow: hidden;
						  /* 设置要显示的行数 */
						  -webkit-line-clamp: 2; /* 这里设置为 2 表示最多显示两行 */
					}
				}
			}

			.btn {
				/deep/ .u-button--primary {
					border-radius: 86rpx;
				}

			}
		}
	}
</style>